<template>
  <div class="container" style="margin-bottom: 50px">
    <p class="title">
      订单详情
      <el-button
        type="primary"
        class="btn"
        @click="$router.back()"
      >返回</el-button>
    </p>
    <el-form ref="form" label-width="80px" style="width: 80%">
      <el-form-item label="订单信息">
        <label for="">订单编号: </label> <span>{{ info.orderNo }}</span><br>
        <label for="">创建时间: </label><span>{{ info.orderCreateTime }}</span><br>
        <label for="">平台: </label><span v-if="info.application">{{ info.application=='00'?'ebroker':'车E家' }}</span>
      </el-form-item>
      <el-form-item label="支付信息">
        <label for="">支付方式: </label>
        <span>{{ ["支付宝", "微信"][info.payWay] }}</span> <br>
        <label for="">消费金额: </label><span>{{ info.amount }}</span><br>
        <label for="">支付订单号: </label><span>{{ info.thirdTradeNo }}</span><br>
        <label for="">支付时间: </label><span>{{ info.payTime }}</span><br>
      </el-form-item>
      <el-form-item label="报告信息">
        <label for="">报告状态: </label><span>{{ ["查无报告", "查询中", "已生成报告"][info.status] }}</span>
        <br>
        <label for="">报告详情: </label><span
          v-if="info.status == 2 || info.status==1"
          style="color: #00f; cursor: pointer"
          @click="dialogVisible = true"
        >查看报告</span><br>
        <label for="">报告生成时间: </label><span>{{ info.reportCreateTime || "暂无" }}</span><br>
      </el-form-item>
      <el-form-item label="车辆信息">
        <label for="">VIN: </label> <span>{{ info.vin }}</span> <br>
        <label for="">行驶证: </label><span>
          <!-- <img style="width:100px;height:60px" :src="info.drivingLicenceUrl"> -->
          <el-image
            v-if="info.drivingLicenceUrl"
            style="width: 100px; height: 60px; vertical-align: top"
            :src="info.drivingLicenceUrl"
            :preview-src-list="[info.drivingLicenceUrl]"
          /> </span><br>
      </el-form-item>
      <el-form-item label="用户信息">
        <label for="">用户ID: </label> <span>{{ info.userId }}</span> <br>
        <label for="">用户身份: </label><span>{{
          ["普通用户", "经纪人", "城市合伙人", "品牌合伙人"][info.roleType] ||
            "暂无"
        }}</span><br>
      </el-form-item>
      <el-form-item v-if="info.refundTime" label="退款信息">
        <label for="">退款方式: </label>
        <span>{{ ["支付宝", "微信"][info.refundWay] }}</span> <br>
        <label for="">退款时间: </label><span>{{ info.refundTime }}</span><br>
        <label for="">退款金额: </label><span>{{ info.refundAmount }}</span><br>
        <label for="">退款订单号: </label><span>{{ info.refundOrderNo }}</span><br>
      </el-form-item>
    </el-form>
    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <header v-if="myinfo && info.status == 1">
        <p class="title">订单已取消</p>
        <p class="desc">暂无该车型的诊断记录</p>
      </header>
      <div v-if="myinfo && info.status == 2" class="content">
        <div class="top"><span class="tips" />订单信息</div>
        <div class="item">
          <div class="left">订单编号</div>
          <div class="right">{{ myinfo.orderNo }}</div>
        </div>
        <div class="item">
          <div class="left">创建时间</div>
          <div class="right">{{ myinfo.createTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付时间</div>
          <div class="right">{{ myinfo.payTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付方式</div>
          <div class="right">{{ ["支付宝", "微信"][myinfo.payWay] }}</div>
        </div>
        <div class="item">
          <div class="left">支付金额</div>
          <div class="right">{{ myinfo.amount }}</div>
        </div>
        <div class="top"><span class="tips" />车辆信息</div>
        <div class="item">
          <div class="left">品牌</div>
          <div class="right">{{ myinfo.travelLicense.brandModel }}</div>
        </div>
        <div class="item">
          <div class="left">VIN</div>
          <div class="right">{{ myinfo.travelLicense.vin }}</div>
        </div>
        <div class="item">
          <div class="left">车牌号</div>
          <div class="right">{{ myinfo.travelLicense.vehicleNo }}</div>
        </div>
        <div class="item">
          <div class="left">发动机号</div>
          <div class="right">{{ myinfo.travelLicense.engineCode }}</div>
        </div>
        <div class="item">
          <div class="left">报告生成时间</div>
          <div class="right">{{ myinfo.reportTime }}</div>
        </div>
        <div class="top"><span class="tips" />非4S店诊断记录 <span style="float:right">{{ myinfo.totalNumber }}</span></div>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item
            v-for="(item, index) in myinfo.faultCodeList"
            :key="index"
            :title="item.recordTime"
            :name="index"
          >
            <template slot="title">
              &nbsp; &nbsp; &nbsp;{{ item.recordTime }}
              <span class="myRight">{{ item.diagnosisList.length }}</span>
            </template>
            <div
              v-for="(items, i) in item.diagnosisList"
              :key="i"
              class="box-content"
            >
              <div class="items">
                <div class="left">故障码</div>
                <div class="right">{{ items.code }}</div>
              </div>
              <div class="items">
                <div class="left">故障系统</div>
                <div class="right">{{ items.systemName }}</div>
              </div>
              <div class="items">
                <div class="left">故障描述</div>
                <div class="right">{{ items.systemName }}</div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="myinfo && info.status == 1" class="content">
        <div class="top"><span class="tips" />退款信息</div>
        <div class="item">
          <div class="left">退款方式</div>
          <div class="right">{{ ["支付宝", "微信"][info.refundWay] }}</div>
        </div>
        <div class="item">
          <div class="left">退款时间</div>
          <div class="right">{{ info.refundTime }}</div>
        </div>
        <div class="item">
          <div class="left">退款金额</div>
          <div class="right">{{ info.refundAmount }}</div>
        </div>
        <div class="item">
          <div class="left">退款订单号:</div>
          <div class="right">{{ info.refundOrderNo }}</div>
        </div>
        <div class="top"><span class="tips" />订单信息</div>
        <div class="item">
          <div class="left">订单编号</div>
          <div class="right">{{ myinfo.orderNo }}</div>
        </div>
        <div class="item">
          <div class="left">创建时间</div>
          <div class="right">{{ myinfo.createTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付时间</div>
          <div class="right">{{ myinfo.payTime }}</div>
        </div>
        <div class="item">
          <div class="left">支付方式</div>
          <div class="right">{{ ["支付宝", "微信"][myinfo.payWay] }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {
        orderId: 36, // 订单id
        orderNo: 'CBS04202108250000004', // 订单编号
        cbsOrderNo: '8ab04be29d9a48a4bc9d4a89bd197c64', // 查博士订单编号
        creatTime: null, // 创建时间
        packageType: 101, // 检测套餐 101-事故排查检测,102-重要部件检测,103-全面检测
        address: '广东省深圳市龙华区龙华汽车站', // 上门检测地址
        travelCost: 95, // 上门交通费
        payWay: 0, // 支付方式 0-支付宝，1-微信，2-积分
        amount: 294, // 消费金额
        thirdTradeNo: '2021082522001489241417543560', // 支付订单号
        payTime: '2021-08-25 18:28:57', // 支付时间
        orderStatus: 102, // 报告状态 101-待付款,102-待检测,103-检测中,104-已检测,105-订单取消
        reportCreateTime: null, // 报告生成时间
        vin: 'LGXC76C34J0080165', // VIN
        imgUrl:
          'https://ecar-test.oss-cn-shenzhen.aliyuncs.com/ecar/app/vehicleTravel/8f712770-590a-4fd7-833b-2135b405b065.jpg', // 行驶证图片
        vehicleNo: '粤BF65732', // 车牌号
        isUser: 0, // 使用性质 0-非营运,1-营运,2-营转非,3-租赁,4-教练
        registerDate: '2021-03-01', // 初登日期
        brandModel: null, // 品牌车型
        userId: 148, // 用户id
        roleType: 0, // 角色类型：0普通用户 1经纪人 2城市合伙人 3品牌合伙人
        name: 'xufenyong', // 联系人
        mobile: '14718099410', // 手机号
        refundType: null,
        refundTime: null, // 退款时间
        refundAmount: null, // 退款金额
        refundTradeNo: null,
        reportUrl:
          'https://api.chaboshi.cn/new_report/show_reportMobile?userid=3449184&orderid=58d181b5003b4158b6025c034a30d0db&timestamp=1600064340038&nonce=2d90cb0a-f652-11ea-a277-309c23b16ffa&signature=IYDKV4tuLsGdddZfP1b8KWXBOg4%3D' // 报告链接
      },
      myinfo: {},
      activeNames: ['0']
    }
  },
  created() {
    this.$get(
      `/web/carVinReport/getOrderDetail?id=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.info = res.data.data
      } else {
        this.$message.error(res.data.message)
      }
    })
    this.$get(
      `app/carVinReport/getFaultCodeDetail?id=${this.$route.query.id}`
    ).then((res) => {
      console.log(res)
      if (res.data.code === '0') {
        this.myinfo = res.data.data
        console.log(this.myinfo)
      } else {
        this.$message.error(res.data.message)
      }
    })
  },
  methods: {
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-collapse-item {
  position: relative;
}
.myRight {
  position: absolute;
  right: 30px;
  top: 0px;
}
header {
  height: 111px;
  text-align: center;
  .title {
    font-size: 30px;
    font-weight: 600;
  }
  .desc {
    font-size: 15px;
  }
}
.box-content {
  border-bottom: 1px solid #f1f1f1;
}
.container {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
    }
  }

  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn {
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 200px;
    display: inline-block;
    text-align: center;
  }
  .content {
    height: 800px;
    position: relative;
    width: 450px;
    overflow: hidden;
    overflow-y: auto;
    .top {
      height: 60px;
      padding: 0 12px;
      line-height: 60px;
      .tips {
        transform: translateY(5px);
        width: 5px;
        height: 26px;
        opacity: 1;
        display: inline-block;
        margin-right: 13px;
        border: 3px solid #f4b22d;
        background: #f4b22d;
        border-radius: 6px;
      }
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      color: #323232;
    }
    .item {
      // height: 88px;
      // line-height: 44px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .items {
      padding: 10px 31px;
      // border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .myContent {
      .item {
        height: 44px;
        line-height: 1px;
        padding: 20px 31px;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        .left {
          color: #919598;
        }
        .right {
          color: #323232;
        }
      }
    }

    button {
      margin-right: 10px;
      font-size: 16px;
      width: 80px;
      height: 40px;
      opacity: 0.6;
      background: #f1f1f1;
      margin-bottom: 10px;
      border-radius: 6px;
      cursor: pointer;
      border: none;
      &.activeColor {
        opacity: 1;
        background: #f4b22d;
        border-radius: 6px;
      }
    }
    .contentDefault {
      height: 392px;
      // width: 100vw;
      padding: 30px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }
}
</style>

